﻿NSMobile.views.kpi = Ext.extend(Ext.Panel, {
    title: 'My KPIs',
    fullscreen: true,
    layout: 'vbox',
    scroll: 'vertical',
    cls: 'performanceForm',
    id: 'performanceForm',
    styleHtmlContent: false,
    width: '100%',
    initComponent: function () {
        var periodSelect = new Ext.form.Select({
            xtype: 'selectfield',
            name: 'period',
            id: 'periodselect',
            store: NSMobile.stores.kpidata,
            displayField: 'periodname',
            valueField: 'periodid',
            listeners: {
                change: {
                    fn: function () {
                        this.onPeriodChange(this.value);
                    }
                },
                afterrender: {
                    fn: function () {
                        if (NSMobile.stores.kpidata.data.length > 0) {
                            var periodselect = Ext.getCmp('periodselect');
                            var data = NSMobile.stores.kpidata.getAt(0).data;
                            if (periodselect && data) {
                                periodselect.onPeriodChange(data.periodid);
                                periodselect.setValue(data.periodid);
                            }
                        }
                    }
                }
            },
            onPeriodChange: function (periodid) {
                if (NSMobile.stores.kpidata.data.length > 0) {
                    var index = NSMobile.stores.kpidata.find('periodid', periodid);
                    if (index > -1)
                        var kpidata = NSMobile.stores.kpidata.getAt(index);
                    if (kpidata)
                        Ext.getCmp('kpiinfo').update(kpidata.data);
                }
            }
        });

        var kpiPanel = new Ext.Panel({
            id: 'kpiinfo',
            styleHtmlContent: false,
            width: '100%',
            tpl: [
                '<section class="detailsList KPIdetails detail">',
                    '<p><span class="label">Official Title:</span><span class="data">{title}</span></p>',
                    '<p class="clickableRow" onclick="javascript:(function(){Ext.getCmp(\'performanceForm\').viewDetail()})()"><span class="label">PRV:</span><span class="data">{[values.prv.toFixed(2)]}</span><span class="clickIcon" /></p>',
                    '<p><span class="label">TWV:</span><span class="data">{[values.twv.toFixed(2)]}</span></p>',
                    '<p class="detailRow"><span class="label">GWV:</span><span class="data">{[values.gwv.toFixed(2)]}</span></p>',
                    '<tpl if="checkActivePeriod()">',
                        '<p class="clickableRow" onclick="javascript:(function(){Ext.getCmp(\'performanceForm\').viewAFL()})()"><span class="label">Active Frontline:</span><span class="data">{afl}</span><span class="clickIcon" /></p>',
                        '<p class="clickableRow" onclick="javascript:(function(){Ext.getCmp(\'performanceForm\').viewTeam()})()"><span class="label">Team:</span><span class="data">{team}</span><span class="clickIcon" /></p>',
                        '<p class="clickableRow" onclick="javascript:(function(){Ext.getCmp(\'performanceForm\').viewGroup()})()"><span class="label">Group:</span><span class="data">{group}</span><span class="clickIcon" /></p>',
                    '</tpl>',
                    '<tpl if="!checkActivePeriod()">',
                        '<p class="detailRow"><span class="label">Active Frontline:</span><span class="data">{afl}</span></p>',
                        '<p class="detailRow"><span class="label">Team:</span><span class="data">{team}</span></p>',
                        '<p class="detailRow"><span class="label">Group:</span><span class="data">{group}</span></p>',
                    '</tpl>',
                '</section>'
            ]
        });

        Ext.apply(this, {
            items: [
                kpiPanel
            ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    cls: 'x-list-header',
                    align: 'center',
                    style: 'margin-bottom:.5em',
                    layout: {
                        pack: 'center'
                    },
                    items: [
                        periodSelect
                    ]
                }
            ]
        });
        NSMobile.views.kpi.superclass.initComponent.apply(this, arguments);
    },
    viewDetail: function () {
        var kpidata = NSMobile.stores.kpidata.getAt(NSMobile.stores.kpidata.find('periodid', Ext.getCmp('periodselect').getValue()));
        if (kpidata) {
            var orders = [];
            for (var i = 0; i < kpidata.data.orders.length; i++)
                orders.push(kpidata.data.orders[i]);
            NSMobile.stores.kpiorders.loadData(orders, false);
        }
        Ext.getCmp('performance').setActiveItem(1);
    },
    viewAFL: function () {
        this.updateAndShowPeeps(NSMobile.stores.aflContacts, 'Frontline');
    },
    viewTeam: function () {
        this.updateAndShowPeeps(NSMobile.stores.teamContactsPaginated, 'Team');
    },
    viewGroup: function () {
        this.updateAndShowPeeps(NSMobile.stores.groupContactsPaginated, 'Group');
    },
    updateAndShowPeeps: function (store, title) {
        perfContactStore = store;

        //NSMobile.stores.perfContacts.sort('sortorder');

        Ext.getCmp('perfcontactlisttoolbar').setTitle('My ' + title);
        Ext.getCmp('performance').setActiveItem(3);

        NSMobile.stores.perfContacts.loadPage(1);
    }
});

Ext.reg('kpi', NSMobile.views.kpi);

function checkActivePeriod() {
    var checkVal;
    var dateString = '' + new Date().getFullYear() + (new Date().getMonth() + 1);
    if (dateString.length == 5)
        dateString = dateString.substring(0, 4) + '0' + dateString.substring(4);
    var periodSelect = Ext.getCmp('periodselect');
    if (periodSelect)
        checkVal = periodSelect.value;
    return !checkVal || dateString == checkVal;
}